<template>
  <li :class="classes" @click="handleClick">
    <slot></slot>
  </li>
</template>
<script>
const prefixCls = 'ivu-dropdown-item';
import { findComponentUpward } from '../../utils/assist';
export default {
  name: 'DropdownItem',
  props: {
    name: {
      type: [String, Number]
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Boolean,
      default: false
    },
    divided: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-disabled`]: this.disabled,
          [`${prefixCls}-selected`]: this.selected,
          [`${prefixCls}-divided`]: this.divided
        }
      ];
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      const $parent = findComponentUpward(this, 'Dropdown');
      const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';

      if (hasChildren) {
        this.$parent.$emit('on-haschild-click');
      } else {
        if ($parent && $parent.$options.name === 'Dropdown') {
          $parent.$emit('on-hover-click');
        }
      }
      $parent.$emit('on-click', this.name);
    }
  }
};
</script>
